import React from "react";
import { Switch, Row, Col, Tooltip } from "antd";
import "./index.less";
interface ISuiteProps {
  name: string;
  Node: any;
  show?: boolean;
  [key: string]: any;
}
interface ISuiteState {
  show: boolean;
}
export default class Suite extends React.PureComponent<ISuiteProps, ISuiteState> {
  constructor(props: ISuiteProps) {
    super(props)
    this.state = {
      show: props.show
    }
  }
  handleOnChange = (value, type) => {
    const { show } = this.state;
    const { onChange } = this.props;
    onChange && onChange({ value, type, show: type === "show" ? value : show });
    type === "show" && this.setState({ show: value });
  }
  render() {
    const { name, Node, description } = this.props;
    const { show } = this.state;
    return <div className="visbar-gui-suite-wrapper">
      <Row className="visbar-gui-item visbar-gui-leaf-item">
        <Col span={6} className="suite-label">
          <Switch size="small" defaultChecked={show} onChange={(value) => this.handleOnChange(value, "show")} />
          <Tooltip title={description || name}> <label>{ name }</label> </Tooltip>
        </Col>
        <Col span={18}>
          { Node && <Node {...this.props} onChange={(value) => this.handleOnChange(value, "value")} disabled={!this.state.show} /> }
        </Col>
      </Row>
    </div>
  }
}